<!-- 组合式 -->
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue';

	import {
		ElMessage
	} from 'element-plus'

	import api from '@/api/api';
	import util from '@/utils/util';
	import config from '@/utils/config';

	import {
		useConfigStore
	} from '@/stores'

	// 组件
	import uploadFileVue from './upload-file.vue';

	// 参数接收
	const props = defineProps({
		bmType: {
			type: Number,
			default: 1,
		},
		id: {
			type: Number,
			default: 0,
		},
		schoolDept: {
			type: Array,
			default: () => {
				return [];
			},
		},
		buttonText: {
			type: String,
			default: '提交申请',
		},
	})
	
	// if(props.schoolDept.length) pages.formData.schoolDeptId = props.schoolDept[0].deptId;
	
	const token = localStorage.getItem('token');

	// 参数
	const pages = reactive({

		xyDept: [],

		zyType: useConfigStore().config.zy_type,

		formData: {
			name: '',
			schoolDeptId: '',
			xyDeptId: '',
			zyType: '',
			studyNo: '',
			fjList: [],
		},

		rules: {
			teacherName: [{
				required: true,
				message: '请输入指导老师',
				trigger: 'blur'
			}],
			name: [{
				required: true,
				message: '请输入姓名',
				trigger: 'blur'
			}],
			schoolDeptId: [{
				required: true,
				message: '请选择学校',
				trigger: 'blur'
			}],
			xyDeptId: [{
				required: true,
				message: '请选择院系',
				trigger: 'blur'
			}],
			zyType: [{
				required: true,
				message: '请选择专业',
				trigger: 'blur'
			}],
			studyNo: [{
				required: true,
				message: '请输入学号',
				trigger: 'blur'
			}],
		},

	})
	const formRef = ref();

	// 学校发生变化
	watch(() => pages.formData.schoolDeptId, async (parentId) => {

		if (!parentId) {
			// 清空系
			pages.xyDept = [];
			pages.formData.xyDeptId = '';
			return
		};

		// 获取系
		pages.xyDept = await api.user.getDeptlist({
			deptName: "", // 部门名称
			parentId, // 父级Id
		})
	})

	// 獲取漢字
	function getContent(data) {
		const text1 = props.schoolDept.find(item => item.deptId == data.schoolDeptId).deptName;
		const text2 = pages.xyDept.find(item => item.deptId == data.xyDeptId).deptName;
		const text3 = pages.zyType.find(item => item.dictValue == data.zyType).dictLabel;
		return `${text1} ${text2} ${text3}`;
	}

	// 提交
	function changeSave() {

		// 拦截验证
		formRef.value.validate(async valid => {
			if (!valid) return;

			let data = JSON.parse(JSON.stringify(pages.formData));
			// 遍历附件
			const old_fjList = data.fjList;
			if (old_fjList.length) {
				let new_fjList = [];
				old_fjList.forEach(item => {
					new_fjList.push({
						name: item.response.newFileName,
						url: item.response.fileName,
					})
				})
				data.fjList = new_fjList;
			}

			data.skillId = props.id;
			data.bmType = props.bmType;
			data.content = getContent(data);

			emit('changeSave', data)
		})
	}

	// 暴露
	defineExpose({})

	// 回调
	const emit = defineEmits(['change', 'changeSave'])
</script>


<template>
	<div class="apply-form">

		<!-- el-form -->
		<el-form ref="formRef" :model="pages.formData" :rules="pages.rules" style="width: 100%;margin-top: 30px;"
			label-position="right" label-width="125px">

				
			<!-- 指导老师： -->
			<el-form-item label="指导老师：" prop="teacherName">
				<el-input type="text" v-model="pages.formData.teacherName" placeholder="请输入指导老师" clearable size="large"
					:style="{width: '100%'}" />
			</el-form-item>
			
			<!-- 姓名： -->
			<el-form-item label="姓名：" prop="name">
				<el-input type="text" v-model="pages.formData.name" placeholder="请输入姓名" clearable size="large"
					:style="{width: '100%'}" />
			</el-form-item>

			<!-- 选择学校： -->
			<el-form-item label="选择学校：" prop="schoolDeptId">
				<el-select v-model="pages.formData.schoolDeptId" placeholder="请选择学校" clearable size="large"
					:style="{width: '100%'}">
					<el-option v-for="item in schoolDept" :key="item.deptId" :label="item.deptName"
						:value="item.deptId" />
				</el-select>
			</el-form-item>

			<!-- 院系： -->
			<el-form-item label="院系：" prop="xyDeptId">
				<el-select v-model="pages.formData.xyDeptId" placeholder="请选择院系" clearable size="large"
					:style="{width: '100%'}">
					<el-option v-for="item in pages.xyDept" :key="item.deptId" :label="item.deptName"
						:value="item.deptId" />
				</el-select>
			</el-form-item>

			<!-- 专业： -->
			<el-form-item label="专业：" prop="zyType">
				<el-select v-model="pages.formData.zyType" placeholder="请选择专业" clearable size="large"
					:style="{width: '100%'}">
					<el-option v-for="item in pages.zyType" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue" />
				</el-select>
			</el-form-item>

			<!-- 学号： -->
			<el-form-item label="学号：" prop="studyNo">
				<el-input type="text" v-model="pages.formData.studyNo" placeholder="请输入学号" clearable size="large"
					:style="{width: '100%'}" />
			</el-form-item>

			<!-- 上传附件 -->
			<el-form-item label="上传附件：" prop="fjList">
				<upload-file-vue v-model="pages.formData.fjList" />
			</el-form-item>

		</el-form>

		<!-- 提交申请 -->
		<l-button :value="buttonText" @change="changeSave" />

	</div>
</template>


<style lang="scss">
	.apply-form {

		.el-form {
			display: grid;
			gap: 20px;
		}

		.el-form-item__label {
			font-size: 14px;
			line-height: 40px;
			color: #333333;
		}

		.el-input__wrapper,
		.el-select__wrapper,
		.el-textarea__inner {
			background-color: #F5F8FD !important;
		}
	}
</style>
<style lang="scss" scoped>
	.apply-form {
		// margin-top: 0px;
		display: flex;
		flex-direction: column;

		.title {
			font-weight: bold;
			font-size: 28px;
			color: #333333;
		}

		.biao {
			margin-top: 10px;
			width: 60px;
			height: 4px;
			background: #5775EF;
			border-radius: 6px 6px 6px 6px;
		}

		.l-button {
			margin: 0 auto;
			margin-top: 40px;
			width: 360px;
			line-height: 48px;
			font-size: 16px;
		}
	}
</style>